<template>
  <div id="PersonalAccount" class="bg-gray-100 p-6 rounded-md shadow-md max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-center">个人信息</h2>
    <el-form :model="userForm" label-width="120px" class="space-y-6">
      <!-- 用户信息输入项 -->
      <el-row class="space-y-4">
        <el-col :span="12">
          <el-form-item label="用户 ID">
            <el-input v-model="userForm.id" disabled class="bg-gray-200 rounded-md p-2" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户名" :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' } ]">
            <el-input 
              v-model="userForm.name" 
              :disabled="!isEditing" 
              class="bg-gray-200 rounded-md p-2"
              :class="!isEditing ? 'bg-gray-100' : ''"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="space-y-4">
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input 
              v-model.number="userForm.age" 
              type="number" 
              :disabled="!isEditing" 
              class="bg-gray-200 rounded-md p-2"
              :class="!isEditing ? 'bg-gray-100' : ''"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别">
            <el-select 
              v-model="userForm.gender" 
              :disabled="!isEditing" 
              class="bg-gray-200 rounded-md p-2"
              :class="!isEditing ? 'bg-gray-100' : ''"
            >
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="space-y-4">
        <el-col :span="12">
          <el-form-item label="电话号码" :rules="[ { required: true, message: '请输入正确的电话号码', trigger: 'blur' } ]">
            <el-input 
              v-model="userForm.number" 
              :disabled="!isEditing" 
              @blur="validatePhone" 
              class="bg-gray-200 rounded-md p-2"
              :class="!isEditing ? 'bg-gray-100' : ''"
            />
            <span v-if="phoneError" class="text-red-500 text-sm">电话号码格式不正确</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input 
              v-model="userForm.email" 
              :disabled="!isEditing" 
              type="email" 
              class="bg-gray-200 rounded-md p-2"
              :class="!isEditing ? 'bg-gray-100' : ''"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="space-y-4">
        <el-col :span="12">
          <el-form-item label="家庭住址">
            <el-input 
              v-model="userForm.home" 
              :disabled="!isEditing" 
              class="bg-gray-200 rounded-md p-2"
              :class="!isEditing ? 'bg-gray-100' : ''"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="办公地址">
            <el-input 
              v-model="userForm.office" 
              :disabled="!isEditing" 
              class="bg-gray-200 rounded-md p-2"
              :class="!isEditing ? 'bg-gray-100' : ''"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 修改密码按钮 -->
      <el-row>
        <el-col :span="24">
          <el-button 
            type="primary" 
            @click="showPasswordDialog" 
            class="bg-blue-500 hover:bg-blue-600 text-white rounded-md p-3 w-full"
          >
            <i class="el-icon-lock"></i> 修改密码
          </el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 修改/保存按钮 -->
    <div class="flex justify-between mt-6">
      <el-button 
        type="default" 
        @click="toggleEdit" 
        class="bg-gray-500 hover:bg-gray-600 text-white rounded-lg py-3 px-6"
      >
        {{ isEditing ? '取消' : '修改' }}
      </el-button>

      <el-button
        type="primary"
        @click="saveEdit"
        :loading="isUpdating"
        class="bg-blue-500 hover:bg-blue-600 text-white rounded-lg py-3 px-6 shadow-lg"
        :disabled="phoneError || !isEditing"
        :title="phoneError ? '请修正电话号码错误' : '保存修改'"
      >
        保存
      </el-button>
    </div>

    <!-- 修改密码对话框 -->
    <el-dialog
      title="修改密码"
      :visible.sync="passwordDialogVisible"
      width="30%"
      class="rounded-md shadow-md"
      :before-enter="dialogEnter"
      :after-leave="dialogLeave"
    >
      <el-form :model="passwordForm" label-width="100px" class="space-y-4">
        <el-form-item label="原密码">
          <el-input v-model="passwordForm.oldPassword" type="password" class="bg-gray-200 rounded-md p-2" />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="passwordForm.newPassword" type="password" class="bg-gray-200 rounded-md p-2" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer flex justify-end space-x-2">
        <el-button @click="passwordDialogVisible = false" class="bg-gray-500 hover:bg-gray-600 text-white rounded-md p-2">
          取消
        </el-button>
        <el-button type="primary" @click="changePassword" class="bg-blue-500 hover:bg-blue-600 text-white rounded-md p-2">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>



<script>
import axios from 'axios';

export default {
  name: 'PersonalAccount',
  data() {
    return {
      userForm: {
        id: '',
        name: '',
        gender: '',
        age: '',
        number: '',
        email: '',
        home: '',
        office: ''
      },
      passwordForm: {
        oldPassword: '',
        newPassword: ''
      },
      phoneError: false,
      isUpdating: false,
      passwordDialogVisible: false,
      isEditing: false,  // 控制是否可以编辑
    };
  },
  computed: {
    // 判断表单是否有效
    isFormValid() {
      return this.userForm.name && this.userForm.age && !this.phoneError;
    }
  },
  watch: {
    'userForm.number': {
      immediate: true,
      handler(newValue) {
        const phoneRegex = /^\d{11}$/;
        this.phoneError = newValue && !phoneRegex.test(newValue);
      }
    }
  },
  mounted() {
    this.getData(); // 获取用户数据
  },
  methods: {
    // 获取数据
    getData() {
      axios.get('http://localhost:8080/manage/getall')
        .then(res => {
          if (res.data && res.data.length > 0) {
            this.userForm = res.data[0];
          }
        })
        .catch(error => {
          console.error('获取用户数据失败:', error);
        });
    },

    // 切换编辑状态
    toggleEdit() {
      this.isEditing = !this.isEditing;
    },

    // 校验电话格式
    validatePhone() {
      const phoneRegex = /^\d{11}$/;
      this.phoneError = !phoneRegex.test(this.userForm.number);
    },

    // 保存修改
    saveEdit() {
      if (this.isFormValid) {
        this.isUpdating = true;
        axios.post(`http://localhost:8080/manage/update`, this.userForm)
          .then(() => {
            this.isEditing = false;
            this.isUpdating = false;
            console.log('修改保存成功');
          })
          .catch(error => {
            console.error('更新失败:', error);
            this.isUpdating = false;
          });
      } else {
        console.log('表单数据不合法');
      }
    },

    // 修改密码逻辑
    showPasswordDialog() {
      this.passwordDialogVisible = true;
    },

    changePassword() {
      const { oldPassword, newPassword } = this.passwordForm;
      // 假设通过某个API更新密码
      console.log('密码已修改:', oldPassword, newPassword);
      this.passwordDialogVisible = false;
      this.passwordForm.oldPassword = '';
      this.passwordForm.newPassword = '';
    },

    dialogEnter(dom) {
      TweenMax.from(dom, 0.3, { opacity: 0, y: -50 });
    },

    dialogLeave(dom) {
      TweenMax.to(dom, 0.3, {
        opacity: 0,
        y: -50,
        onComplete: () => {
          this.passwordDialogVisible = false;
        }
      });
    }
  }
};
</script>



<style scoped>
/* 引入 Open Sans 字体 */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

/* 整体页面样式 */
#PersonalAccount {
  font-family: 'Open Sans', sans-serif;
}

/* 自定义颜色类 */
.bg-gray-100 {
  background-color: #f8f9fa;
}
.bg-gray-200 {
  background-color: #e9ecef;
}
.bg-blue-500 {
  background-color: #007bff;
}
.bg-blue-600 {
  background-color: #0056b3;
}
.bg-gray-500 {
  background-color: #6c757d;
}
.bg-gray-600 {
  background-color: #495057;
}
.text-red-500 {
  color: #dc3545;
}

/* 间距类 */
.p-2 {
  padding: 0.5rem;
}
.p-6 {
  padding: 1.5rem;
}
.space-y-2 {
  margin-bottom: 0.5rem;
}
.space-y-4 {
  margin-bottom: 1rem;
}
.mt-4 {
  margin-top: 1rem;
}

/* 圆角类 */
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-lg {
  border-radius: 0.5rem;
}

/* 按钮尺寸类 */
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* 阴影类 */
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 图标样式 */
.el-icon-lock {
  margin-right: 0.5rem;
}
</style>
